f<template>
  <div>
    <!-- 查询框 -->

    <!-- 所查询之营销机会信息 -->
    <el-row>
      <!-- 表单 -->
      <el-form
        ref="marketingOpportunityInfo"
        :model="marketingOpportunityInfo"
        label-width="80px"
      >
        <!-- 表单第一行 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="客户名称">
              <el-input
                v-model="sale_data.sale_remark"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="联系人">
              <el-input v-model="clictname" :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="机会来源">
              <el-input
                v-model="sale_data.sale_source"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="概要">
              <el-input
                v-model="sale_data.sale_title"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 表单第二行 -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="机会描述">
              <el-input
                type="textarea"
                v-model="sale_data.sale_content"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 表单第三行 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="创建人">
              <el-input v-model="creatusername" :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="指派给">
              <el-input v-model="dealusername" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="成功概率">
              <el-progress
                :text-inside="true"
                :stroke-width="28"
                :percentage="sale_data.sale_rate"
                :color="customColor"
                style="margin-top: 7px"
              ></el-progress>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开发结果">
              <el-input :disabled="true" v-model="sale_data.sale_state">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="12">
            <div v-if="sale_data.sale_state == '开发中'">
              <el-button
                style="float: left"
                type="primary"
                round
                @click="completedevp()"
                >开发成功</el-button
              >
              <el-button
                style="float: left"
                type="warning"
                round
                @click="faildevp()"
                >开发失败</el-button
              >
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-row>

    <el-row style="margin-top: 15px">
      <!-- 客户开发计划及执行情况列表 -->
      <el-card shadow="hover">
        <!-- 卡片头部 -->
        <div slot="header" class="clearfix">
          <el-row style="height: 40px">
            <el-col :span="16">
              <div
                style="
                  font-size: 20px;
                  text-align: left;
                  color: #000000;
                  margin: 10px 0px 0px 10px;
                "
              >
                客户开发计划及执行情况
              </div>
            </el-col>

            <el-col :span="2">
              <el-button
                style="
                  float: right;
                  padding: 3px 0;
                  height: 40px;
                  text-align: center;
                "
                type="text"
                icon="el-icon-plus"
                @click="addPlan()"
                >添加计划</el-button
              >
            </el-col>

            <el-col :span="2">
              <el-button
                style="
                  float: right;
                  padding: 3px 0;
                  height: 40px;
                  text-align: center;
                "
                type="text"
                icon="el-icon-refresh"
                @click="refreshList()"
                >刷新列表</el-button
              >
            </el-col>

            <el-col :span="2">
              <el-button
                style="
                  float: right;
                  padding: 3px 0;
                  height: 40px;
                  text-align: center;
                "
                type="text"
                icon="el-icon-delete"
                @click="deleteInBatches()"
                >批量删除</el-button
              >
            </el-col>

            <el-col :span="2">
              <el-button
                style="
                  float: right;
                  padding: 3px 0;
                  height: 40px;
                  text-align: center;
                "
                type="text"
                icon="el-icon-close"
                @click="toggleSelection()"
                >取消选择</el-button
              >
            </el-col>
          </el-row>
        </div>

        <!-- 列表 -->
        <el-table
          ref="customer_development_plan_info_list"
          :data="devp_data.list"
          highlight-current-row
          tooltip-effect="dark"
          stripe
          border
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55" prop="dp_id">
          </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            align="center"
          ></el-table-column>

          <el-table-column
            property="dp_id"
            label="编号"
            align="center"
          ></el-table-column>

          <el-table-column property="dp_date" label="日期" align="center">
            <template slot-scope="scope">
              {{ scope.row.dp_date | myCurrency() }}
            </template>
          </el-table-column>
          <el-table-column
            property="dp_title"
            label="标题"
            align="center"
          ></el-table-column>

          <el-table-column
            property="dp_content"
            label="计划项"
            align="center"
          ></el-table-column>

          <el-table-column property="dp_status" label="执行情况" align="center">
            <template slot-scope="scope">
               <el-tag type="success" v-if="scope.row.dp_status==1">已执行</el-tag>
               <el-tag type="primary" v-if="scope.row.dp_status!=1">待执行</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="编辑" align="center">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.dp_status == '1'"
                disabled
                type="success"
                icon="el-icon-check"
                circle
                size="small"
              ></el-button>

              <el-button
                v-if="scope.row.dp_status == '0'"
                @click="chengestatus(scope.row.dp_id)"
                icon="el-icon-check"
                circle
                size="small"
              ></el-button>
              <el-button
                v-if="scope.row.dp_status == '1'"
                disabled
                icon="el-icon-edit"
                circle
                size="small"
              ></el-button>
              <el-button
                v-if="scope.row.dp_status == '0'"
                @click="editPlan(scope.row)"
                icon="el-icon-edit"
                circle
                size="small"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-row>

    <!-- “添加计划”对话框 -->
    <el-dialog :visible.sync="addPlanDialogVisible" title="添加计划项">
      <el-form
        :model="adddevpPlanFormData"
        ref="adddevpPlanFormrules"
        label-width="100px"
        :rules="rules"
      >
        <!-- 日期 -->
        <el-form-item label="日期" prop="dp_date">
          <el-date-picker
            type="date"
            placeholder="选择计划执行日期"
            v-model="adddevpPlanFormData.dp_date"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>

        <!-- 计划项 -->
        <el-form-item label="计划项" prop="dp_content">
          <el-input v-model="adddevpPlanFormData.dp_content"></el-input>
        </el-form-item>
        <!-- 标题 -->
        <el-form-item label="标题"  prop="dp_title"> 
          <el-input v-model="adddevpPlanFormData.dp_title"></el-input>
        </el-form-item>

        <!-- 提交/重置表单按钮 -->
        <el-form-item>
          <el-row>
            <el-col :span="4" :offset="15">
              <el-button type="primary" @click="submitAddPlanForm('adddevpPlanFormrules')"
                >确定提交</el-button
              >
            </el-col>
            <el-col :span="4" :offset="1">
              <el-button @click="resetAddPlanForm()">离开</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- “编辑计划执行情况”对话框 -->
    <el-dialog :visible.sync="editPlanDialogVisible" title="原计划执行情况">
      <el-form
      :model="addPlanFormData"
      :rules="rules"
      ref="editformdatarules"
      >
        <!-- 日期 -->
        <el-form-item label="日期" prop="dp_date">
          <el-date-picker
            type="date"
            placeholder="选择计划执行日期"
            v-model="addPlanFormData.dp_date"
            
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <!-- 计划项 -->
        <el-form-item label="计划项" prop="dp_content">
          <el-input v-model="addPlanFormData.dp_content"></el-input>
        </el-form-item>
        <!--标题-->
        <el-form-item label="标题" prop="dp_title">
          <el-input v-model="addPlanFormData.dp_title"></el-input>
        </el-form-item>
        <!-- 提交/重置表单按钮 -->
        <el-form-item>
          <el-row>
            <el-col :span="4" :offset="15">
              <el-button type="primary" @click="submitEditPlanForm('editformdatarules')"
                >确定</el-button
              >
            </el-col>
            <el-col :span="4" :offset="1">
              <el-button @click="editPlanDialogVisible = false"
                >取 消</el-button
              >
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--添加公司-->
    <el-row>
      <el-dialog title="添加公司信息" :visible.sync="updComInfoFormVisible">
        <el-form inline="true" label-width="100px" class="demo-ruleForm"
        :model="updCompanyInfo"
        :rules="rules"
        ref="addcomrule"
        >
          <el-form-item label="公司名称" :label-width="formLabelWidth" prop="com_name">
            <el-input
              type="text"
              v-model="updCompanyInfo.com_name"
              style="width: 100%"
            ></el-input>
          </el-form-item>
          <el-form-item label="公司电话" :label-width="formLabelWidth" prop="com_tel">
            <el-input type="text" v-model="updCompanyInfo.com_tel"></el-input>
          </el-form-item>
          <el-form-item label="公司地址" :label-width="formLabelWidth" prop="com_addr">
            <el-input type="text" v-model="updCompanyInfo.com_addr"></el-input>
          </el-form-item>

          <el-form-item label="公司法人" :label-width="formLabelWidth" prop="com_legal">
            <el-input type="text" v-model="updCompanyInfo.com_legal"></el-input>
          </el-form-item>
          <el-form-item label="营业执照" :label-width="formLabelWidth" prop="com_license">
            <el-input
              type="text"
              v-model="updCompanyInfo.com_license"
            ></el-input>
          </el-form-item>
          <el-form-item label="客户满意度" :label-width="formLabelWidth" prop="com_satisfaction">
            <el-input
            
              v-model.number="updCompanyInfo.com_satisfaction"
            ></el-input>
          </el-form-item>
          <el-form-item label="客户信用度" :label-width="formLabelWidth" prop="com_credit">
            <el-input
              
              v-model.number="updCompanyInfo.com_credit"
            ></el-input>
          </el-form-item>
          <el-form-item label="公司注册资金" :label-width="formLabelWidth" prop="com_fund">
            <el-input  v-model.number="updCompanyInfo.com_fund"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updComInfoFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="save('addcomrule')"
            v-loading.fullscreen.lock="fullscreenLoading"
            >保 存</el-button
          >
        </div>
      </el-dialog>
    </el-row>
    <!--添加联系人-->
    <el-dialog title="编辑联系人信息" :visible.sync="ClientInfoDialog">
      <el-row>
        <el-form inline="true" label-width="100px" class="demo-ruleForm"
        ref="clintformrule"
        :rules="rules"
        :model="updClientInfo"
        >
          <el-form-item label="名字" prop="cli_name">
            <el-input
              type="text"
              v-model="updClientInfo.cli_name"
              style="width: 100%"
            ></el-input>
          </el-form-item>
          <el-form-item label="职务" prop="cli_job">
            <el-input
              type="text"
              v-model="updClientInfo.cli_job"
              style="width: 100%"
            ></el-input>
          </el-form-item>

          <el-form-item label="电话" prop="cli_tel">
            <el-input
              type="text"
              v-model="updClientInfo.cli_tel"
              style="width: 100%"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="cli_sex">
            <el-select v-model="updClientInfo.cli_sex" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ClientInfoDialog = false">取 消</el-button>
        <el-button type="primary" @click="savecli('clintformrule')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
export default {
  data() {
    return {
      fullscreenLoading: false,
      customColor: "#C0C0C0",
      ids: [],
      devpstatus: "0",
      sale_id: "",
      devp_data: {},
      sale_data: {
        sale_remark: "",
        sale_source: "",
        sale_title: "",
        sale_content: "",
        sale_rate: "",
        sale_state: "",
        sale_dealcode: "",
      },
      clictname: "",
      updCompanyInfo: {
        com_id: "",
        com_addr: "",
        com_tel: "",
        com_status: "",
        com_satisfaction: "",
        com_credit: "",
        com_legal: "",
        com_license: "",
        com_fund: "",
        com_name: "",
      },

      options: [
        {
          value: "1",
          label: "女",
        },
        {
          value: "2",
          label: "男",
        },
      ],
     
      updClientInfo: {
        cli_id: "",
        com_id: "",
        cli_tel: "",
        cli_name: "",
        cli_sex: "",
        cli_job: "",
        cli_status: "",
      },
      ClientInfoDialog: false,
      creatusername: "",
      dealusername: "",
      updComInfoFormVisible: false,
      //表单变量
      marketingOpportunityInfo: {
        name: "",
        source: "",
        digest: "",
        contacts: "",
        contactsTel: "",
        creator: "",
        designate: "",
        opportunityStatement: "",
        createDate: "",
      },
      //表单验证规则
      rules: {
        dp_date: [{ required: true, message: "请选择日期", trigger: "change" }],
        dp_content: [
          { required: true, message: "请填写计划内容", trigger: "blur" },
        ],
        dp_title: [{ required: true, message: "请填写标题", trigger: "blur" }],
        
        com_addr: [{required: true, message: "请填写地址", trigger: "blur"}],
        com_tel:[
            {  required: true, message: '请填写电话', trigger: 'blur' },
            { len:11, message: "必须是11位的数字", trigger: "blur", }
          ] ,
       
        com_satisfaction: [
            {  required: true, message: '请填写满意度1-5', trigger: 'blur' },
            {
            type: 'number',
            min:0,
            max:5,
            message: "满意度在0~5之间",
            trigger: "blur",
          },
          ],
        com_credit:  [
            {  required: true, message: '请填写信誉度1-5', trigger: 'blur' },
            {
            type: 'number',
            min:0,
            max:5,
            message: "信誉度在0~5之间",
            trigger: "blur",
          },
          ],
        com_legal:  [{required: true, message: "请填写法人", trigger: "blur"}],
        
        com_fund: [{
            type: 'number',
            min:0,
            max:100000000,
            message: "注册资金，单位为万，请填写数字",
            trigger: "blur",
          }],
        com_name:  [{required: true, message: "请填写内容", trigger: "blur"}],
         cli_sex: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
          cli_name:[{required: true, message: '请添加联系人名称', trigger: 'change'}],
          cli_tel:[
            {  required: true, message: '请填写电话', trigger: 'blur' },
            { len:11, message: "必须是11位的数字", trigger: "blur", }
          ] ,
          cli_job:[{required: true, message: "请填写职务", trigger: "blur"}]
      },

      //表格内容
      customerDevelopmentPlanListData: [],
      currentRow: "",

      // 对话框可见性
      addPlanDialogVisible: false,
      editPlanDialogVisible: false,

      //编辑修改表单
      addPlanFormData: {
        dp_date: "",
        dp_content: "",
        dp_id: "",
        dp_title: "",
      },
      //添加计划表单
      adddevpPlanFormData: {
        dp_date: "",
        dp_content: "",
        dp_title: "",
        sale_id: "",
        dp_status: "0",
      },
    };
  },

  methods: {
    loaddata() {
      this.$axios
        .get("/devps/" + this.sale_id)
        .then((res) => {
          this.devp_data = res.data.data.devpdata;
          this.sale_data = res.data.data.saledata;
          this.creatusername = res.data.data.creatname;
          this.dealusername = res.data.data.dealname;
          this.clictname = res.data.data.cliname;
          if (this.sale_data.sale_state == 1) {
            this.sale_data.sale_state = "开发中";
          }
          if (this.sale_data.sale_state == 2) {
            this.sale_data.sale_state = "开发成功";
          }
          if (this.sale_data.sale_state == 3) {
            this.sale_data.sale_state = "开发失败";
          }
        })
        .catch((error) => {});
    },
    //增加公司完成之后，先不给后台提交，先直接跳出增加联系人模态框
    save(addcomrule) {
      this.$refs[addcomrule].validate((valid)=>{
        if(valid){
          this.updComInfoFormVisible = false;
          this.fullscreenLoading = true;
          setTimeout(() => {
            this.fullscreenLoading = false;
          }, 900);
          setTimeout(() => {
            this.ClientInfoDialog = true;
      }, 800);
        }else {
            console.log('error submit!!');
            return false;}
      })
      
    },
    //增加完联系人后，先提交公司的，，
    savecli(clintformrule) {
    this.$refs[clintformrule].validate((valid)=>{
      if(valid){
         this.ClientInfoDialog = false;
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 1)'
        });
        setTimeout(() => {
          this.$axios
            .post("/companies/add", this.updCompanyInfo)
            .then((res) => {
              //成功后获取后台回传的公司ID，再提交增加联系人请求
              this.updClientInfo.com_id = res.data.data;
              this.updClientInfo.cli_sex = this.value;
              this.$axios
                .post("/clientsAdd", this.updClientInfo)
                .then((res) => {
                  //成功后,回传联系人ID，修改销售机会表，增加联系人id
                  this.$axios
                    .post("/sucesssale", {
                      saleid: this.sale_id,
                      cliid: res.data.data,
                    })
                    .then((res) => {
                      //成功之后，修改销售机会的状态和开发计划的状态
                      this.$axios
                        .put("/devps/" + this.sale_id + "/" + 2)
                        .then((res) => {
                          alert(res.data.message);
                          this.loaddata();
                        })
                        .catch((error) => {});
                    })
                    .catch((error) => {});
                })
                .catch((error) => {});
              this.updCompanyInfo = {
                com_id: "",
                com_addr: "",
                com_tel: "",
                com_status: "",
                com_satisfaction: "",
                com_credit: "",
                com_legal: "",
                com_license: "",
                com_fund: "",
                com_name: "",
              };
            })
            .catch((error) => {}); 
          loading.close();
        }, 1000);
      }else {
            console.log('error submit!!');
            return false;}
    })
    },
    completedevp() {
      //点击开发成功，先跳出增加公司模态框
      if (this.sale_data.sale_dealcode == sessionStorage.getItem("user_code")) {
        this.updComInfoFormVisible = true;
        this.updCompanyInfo.com_name = this.sale_data.sale_remark;
        //   this.$axios.put("/devps/"+this.sale_id+"/"+2).then(res=>{
        //     alert(res.data.message)
        //     this.loaddata();
        // }).catch(error=>{
        // })
      } else {
        this.$message({
          message: "您不是被指派人",
          type: "warning",
        });
      }
    },
    faildevp() {
      if (this.sale_data.sale_dealcode == sessionStorage.getItem("user_code")) {
        this.$axios
          .put("/devps/" + this.sale_id + "/" + 3)
          .then((res) => {
            this.$message.error('谢谢您的努力，下次一定可以');
            this.loaddata();
          })
          .catch((error) => {});
      } else {
        this.$message({
          message: "您不是被指派人",
          type: "warning",
        });
      }
    },

    // 表格---------------------------------------------------------
    // 添加计划
    addPlan() {
      if (this.sale_data.sale_dealcode == sessionStorage.getItem("user_code")) {
        this.addPlanDialogVisible = true;
      } else {
        this.$message({
          message: "您不是被指派人",
          type: "warning",
        });
      }
    },

    //执行计划
    chengestatus(val) {
      if (this.sale_data.sale_dealcode == sessionStorage.getItem("user_code")) {
        this.$axios
          .post("/devps/" + val)
          .then((res) => {
            this.$message({
          message: '执行成功！距离成功又近了一步',
          type: 'success'
        });
            this.loaddata();
          })
          .catch((error) => {});
      } else {
        this.$message({
          message: "您不是被指派人",
          type: "warning",
        });
      }
    },
    // 编辑计划完成情况
    editPlan(row) {
      if (this.sale_data.sale_dealcode == sessionStorage.getItem("user_code")) {
        this.editPlanDialogVisible = true;
        this.addPlanFormData.dp_date = row.dp_date;
        this.addPlanFormData.dp_content = row.dp_content;
        this.addPlanFormData.dp_id = row.dp_id;
        this.addPlanFormData.dp_title = row.dp_title;
      } else {
        this.$message({
          message: "您不是被指派人",
          type: "warning",
        });
      }
    },

    // 表格控制当前选中行
    handleSelectionChange(val) {
      let ids = []; //存放选中的id
      for (let item of val) {
        ids.push(item.dp_id);
      }
      //将选中的所有项的id放到数据模型中
      this.ids = ids;
      console.log(this.ids);
    },

    // 批量删除计划
    deleteInBatches() {
      if (this.sale_data.sale_dealcode == sessionStorage.getItem("user_code")) {
        this.$axios
          .post("/devps/del", this.ids)
          .then((res) => {
            alert(res.data.message);
            this.loaddata();
          })
          .catch((error) => {});
      } else {
        this.$message({
          message: "您不是被指派人",
          type: "warning",
        });
      }
    },

    // 刷新列表
    refreshList() {
      const loading = this.$loading({
          lock: true,
          text: '刷新数据',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 600);
      this.loaddata();
    },

    // 取消选择
    toggleSelection() {
      this.$refs.customer_development_plan_info_list.clearSelection();
      console.log("cancel selection");
    },

    // "添加计划"对话框
    submitAddPlanForm(adddevpPlanFormrules) {
      
      this.adddevpPlanFormData.sale_id = this.sale_id;
      this.$refs[adddevpPlanFormrules].validate((valid) => {
        if (valid) {
          this.addPlanDialogVisible=false;
          const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 1)'
        });
        setTimeout(() => {
           this.$axios
            .put("/devps", this.adddevpPlanFormData)
            .then((res) => {
              this.$message({
             message: "添加成功",
             type: "success",
        });
              this.resetAddPlanForm();
              this.loaddata();
            })
            .catch((error) => {});
          loading.close();
        }, 1000);
          
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetAddPlanForm() {
      this.adddevpPlanFormData.dp_date = "";
      this.adddevpPlanFormData.dp_content = "",
      this.adddevpPlanFormData.dp_title = "",
      this.addPlanDialogVisible = false;
    },

    //  "编辑计划执行情况"对话框----------------------------------------------
    submitEditPlanForm(editformdatarules) {
      this.$refs[editformdatarules].validate((valid)=>{
        if(valid){
            this.$axios
            .post("/devps", this.addPlanFormData)
            .then((res) => {
              alert("修改成功");
              this.editPlanDialogVisible = false;
              this.loaddata();
            })
            .catch((error) => {});
        }else {
          console.log("error submit!!");
          return false;
        }
      })      
    },
  },
  mounted() {
    this.sale_id = this.$route.params.sale_id;
    this.loaddata();
  },
  filters: {
    myCurrency: function (el) {
      return el.substring(0, 10);
    },
  },
};
</script>
